<template>
  <el-popover title="配置组件属性" placement="top" v-model="visible" width="400" @hide="onPopoverHide">
    <dynamic-form v-if="visible" ref="propFormRef" v-model="form" label-width="100px" :columns="fieldColumns"></dynamic-form>

<!--    <div class="btn-actions">-->
<!--      <el-button type="primary" size="mini" @click="onSave">确定</el-button>-->
<!--      <el-button type="default" size="mini" @click="onCancel">取消</el-button>-->
<!--    </div>-->

    <el-button slot="reference" type="primary" icon="el-icon-setting" :disabled="isDisabled">设置组件属性配置</el-button>
  </el-popover>
</template>

<script>
import _ from 'lodash';

export default {
  name: 'table-form-item-prop',
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: null,
    fieldType: {
      type: String,
    },
  },
  data() {
    return {
      visible: false,
      form: {
        required: true,
      },
      fieldColumns: [],
    };
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.form = val;
        }
      },
      immediate: true,
      deep: true,
    },
    fieldType: {
      handler(val) {
        if (val) {
          // 每次字段类型改变时，都需要重置表单字段
          this.$refs['propFormRef'] && this.$refs['propFormRef'].clearForm();
          this.form = {};
          this.setFieldColumnsByFieldType(val);
        }
      },
    },
  },
  computed: {
    isDisabled() {
      return !this.fieldType;
    },
  },
  created() {
    if (this.fieldType) {
      this.setFieldColumnsByFieldType(this.fieldType);
    }
  },
  methods: {
    /**
     * popover 隐藏回调
     */
    onPopoverHide() {
      this.visible = false;
      this.$emit('change', this.form);
    },

    /**
     * 根据字段类型设置动态表单显示的字段配置项
     * @param fieldType { String } 字段类型
     */
    setFieldColumnsByFieldType(fieldType) {
      // 公共配置项
      const commonColumns = [
        { fieldType: 'checkbox', fieldName: 'required', label: '必填', col: { span: 8 } },
        { fieldType: 'checkbox', fieldName: 'disabled', label: '禁用', col: { span: 8 } },
      ];

      // 文本类型公共的部分配置项
      if (['input', 'textarea'].includes(fieldType)) {
        commonColumns.push(
          { fieldType: 'checkbox', fieldName: 'clearable', label: '是否可清空', col: { span: 8 } },
          { fieldType: 'number', fieldName: 'maxlength', label: '最大输入长度', col: { span: 24 }, props: { clearable: false } },
          { fieldType: 'number', fieldName: 'minlength', label: '最小输入长度', col: { span: 24 }, props: { clearable: false } },
          { fieldType: 'input', fieldName: 'placeholder', label: '占位文本', col: { span: 24 } },
        );
      }

      switch (fieldType) {
        // 单行文本
        case 'input':
          this.fieldColumns = [
            ...commonColumns,
          ];
          break;
        // 多行文本
        case 'textarea':
          this.fieldColumns = [
            ...commonColumns,
            { fieldType: 'checkbox', fieldName: 'showWordLimit', label: '是否显示输入字数统计', col: { span: 12, labelWidth: '160px' } },
            { fieldType: 'number', fieldName: 'rows', label: '输入框行数', col: { span: 24 } },
            {
              fieldType: 'select',
              fieldName: 'resize',
              label: '控制是否能被用户缩放',
              col: { span: 24, labelWidth: '160px' },
              options: [
                { value: 'none', label: 'none' },
                { value: 'both', label: 'both' },
                { value: 'horizontal', label: 'horizontal' },
                { value: 'vertical', label: 'vertical' },
              ],
            },
          ];
          break;
        // 下拉选择
        case 'select':
          this.fieldColumns = [
            ...commonColumns,
            { fieldType: 'checkbox', fieldName: 'multiple', label: '是否多选', col: { span: 8 } },
            { fieldType: 'checkbox', fieldName: 'collapseTags', label: '多选时是否将选中值按文字的形式展示', col: { span: 16, labelWidth: '250px' } },
            { fieldType: 'checkbox', fieldName: 'filterable', label: '是否可搜索', col: { span: 8 } },
            { fieldType: 'input-number', fieldName: 'multipleLimit', label: '最多选择的项目数', col: { span: 24, labelWidth: '150px' } },
            { fieldType: 'input', fieldName: 'placeholder', label: '占位符', col: { span: 24 } },
          ];
          break;
      }
    },

    /**
     * 保存
     */
    onSave() {
      this.$refs['propFormRef'].validate(valid => {
        if (valid) {
          this.visible = false;
          this.$emit('change', this.form);
        }
      });
    },

    /**
     * 取消
     */
    onCancel() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
